import React, { useEffect, useRef } from 'react';
import { connect } from 'react-redux';
import { asynCeShi, ceshiAction } from '../../store/actions/ceshi/ceshiAction';
import PropTypes from 'prop-types';
function CeShi(props) {
  let { ceshi, ceshiAction, asynCeShi } = props;
  let inp = useRef();
  useEffect(() => {
    console.log(props);
  }, []);
  function change() {
    ceshiAction(inp.current.value * 1);
  }
  function changeAsync() {
    asynCeShi(inp.current.value * 1);
  }
  return (
    <div>
      <div>
        <span>仓库中的数据为{ceshi}</span>
        <br />
        <span>添加</span>
        <input type={'text'} ref={inp} placeholder="请输入数字"></input>
        <br />
        <button onClick={change}>同步添加</button>
        <button onClick={changeAsync}>异步添加</button>
        {/* <span>{ceshiData}</span> */}
      </div>
    </div>
  );
}
CeShi.propTypes = {
  ceshi: PropTypes.number,
  ceshiAction: PropTypes.func,
  asynCeShi: PropTypes.func,
};
export default connect((state) => ({ ceshi: state.ceshiname }), { ceshiAction, asynCeShi })(CeShi);
